import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import {
	Button,
	message,
	Popconfirm,
	Space,
	Image,
	Cascader,
	Tag,
	Divider,
	Descriptions,
	List
	
} from "antd";
import Search from "antd/lib/input/Search";
import { user, classify, remove, userList, deleteTag } from "./service";
import { arrayToObject, getArray } from "phinney-toolkit";
import { DynamicFormItem } from "@/components/DynamicForm";
import axios from "axios";
import { render } from "react-dom";
import { await } from "@umijs/deps/compiled/signale";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	// 用户列表
	let [followList, setFollowList] = useState<any>([]);

	const getFollowList = async () => {
		const res = await userList({});
		!isUnMounted && setFollowList(getArray(res?.data));
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "group_id",
			dataIndex: "group_id",
			hideInSearch: false,
		},
		{
			title: "Group名称",
			dataIndex: "group_name",
			search: false,
		},
		{
			title: "状态",
			dataIndex: "deleted",
			search: false,
			render: (_, record: any) => {
				if (record.deleted) {
					return <div>已删除</div>;
				} else {
					return <div>未删除</div>;
				}
			},
		},
		{
			title: "创建时间",
			dataIndex: "create_time",
			search: false,
			
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "upload",
				label: "分类图片",
				name: "classifyIcon",
				fieldProps: {
					limit: 1,
				},
				required: true,
			},
			{
				type: "text",
				label: "分类名称",
				name: "classifyName",
				required: true,
			},
			{
				type: "select",
				label: "分类类型",
				name: "classifyType",
				
			},
			{
				type: "custom",
				label: "上级分类",
				name: "parentId",
				render: (form: any, record: any) => {
					return (
						<div>
							<Cascader
								defaultValue={[record.parentName] || ""}
								options={vm.state.classsifyList}
								fieldNames={{
									label: "classifyName",
									value: "id",
									children: "list",
								}}
								changeOnSelect
								onChange={(item: any) => {
									form.setFieldsValue({
										parentId: item[item.length - 1],
									});
								}}
								placeholder="请选择类别~"
							/>
						</div>
					);
				},
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "classifyCode",
		scroll: { x: 1500 },
		columns,
		listProps: {
			url: "/wechat/get-corp-tag-list",
			method: "POST",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		handleOperating: (items: OperatingItem[]) => {
            return [
                {
                    type: "modal",
				    props: {
					    url: "/goods/audit-goods",
					    method: "POST",
					    btnText: "编辑标签",
					    modalProps: {
							width: 1100,
							footer: false,
							title: "编辑标签",
							content: {
								render: (vm: any, getModalRef: any) => {
									let result = vm.state.record;
									console.log("=================>>>>>>>>>>>>", result.tag);
									
									return (
										<div>
											{
												result.tag.map((item:any)=>{
													return <div style={{display: "flex", flexDirection: "row", marginBottom: 20, alignItems: 'center', justifyContent:"space-between"}}>
														<Descriptions layout="vertical" bordered>
															<Descriptions.Item label="标签id">{item.id}</Descriptions.Item>
															<Descriptions.Item label="标签名称">{item.name}</Descriptions.Item>
															<Descriptions.Item label="创建时间">{item.create_time}</Descriptions.Item>
														</Descriptions>
														<Button type="primary" onClick={ async ()=> {
															const params = {
																group_id: result.group_id,
																tag_id: item.id
															}
															const rst = await deleteTag(params);
														}}>删除标签</Button>
													</div>
												})
											}

										</div>
									);
								}
							}
						},
						paramsHandle: ({ ...params }): any => {
							
						},
				    },
                },
                {
                    type: 'modal',
                    props: {
                        url: "/wechat/add-corp-tag-list",
						method: "POST",
                        btnText: '添加标签',
                        modalProps: {
                            width: 600,
                            title: '添加标签',
                            bodyStyle: { padding: 16 },
                            formItems: [
								{
                                    type: "text",
                                    name: "group_id",
                                    label: "组ID",
                                    required: false,
                                },
								{
                                    type: "text",
                                    name: "group_name",
                                    label: "组名称",
                                    required: false,
                                },
                                {
                                    type: "text",
                                    name: "name",
                                    label: "标签名称",
                                    required: false,
                                },
                            ],
                            formValuesHandle: (record: any) => {
                                return {
                                    ...record,
                                };
                            },
                        },
                        paramsHandle: (params: any, record: any) => {
                            
							params.tagSrc = JSON.stringify([{"name": params.name, "order": 1}]);
							console.log("-----", params);

                            return { ...params };
                        },
                    }
                },
            ]
        },
		
	};

	// 初始化加载数据
	useEffect(() => {
		getFollowList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
